<template>
  <!-- 电表统计 -->
  <div class="app-container">
    <el-row :gutter="20" class="full-height">
      <el-col :span="leftColSpan" class="full-height" ref="leftCol">
        <div class="panel-wrapper">
          <div class="left-panel" :class="{'collapsed': isCollapse}" :style="{ width: isCollapse ? '0' : leftWidth + 'px' }">
            <div class="tree-wrapper" :class="{'hidden': isCollapse}">
              <ammeter-tree @node-click="handleNodeClick" />
            </div>
            <div class="resizer" 
                 @mousedown="startResize"
                 :class="{ 'resizing': isResizing }">
            </div>
          </div>
        </div>
        <div class="collapse-btn" 
             :style="{ left: isCollapse ? '0' : leftWidth - 1 + 'px' }"
             @click="toggleCollapse">
          <i :class="isCollapse ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'"></i>
        </div>
      </el-col>
      <el-col class="full-height right-col" :style="{ marginLeft: isCollapse ? '0px' : '0px' }">
        <div class="chart-container">
          <!-- 添加搜索区域 -->
          <div class="search-wrapper">
            <el-form :model="queryParams" ref="queryForm" :inline="true">
              <el-form-item label="类型" prop="statType">
                <el-select v-model="queryParams.statType" placeholder="请选择统计类型" @change="handleTypeChange">
                  <el-option label="15分钟" value="min15" />
                  <el-option label="小时" value="hour" />
                  <el-option label="日" value="day" />
                  <el-option label="月" value="month" />
                  <el-option label="年" value="year" />
                </el-select>
              </el-form-item>
              
              <!-- 15分钟和小时的时间选择 -->
              <template v-if="['min15', 'hour'].includes(queryParams.statType)">
                <el-form-item label="时间范围" prop="timeRange">
                  <el-date-picker
                    v-model="timeRange"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    :value-format="queryParams.statType === 'hour' ? 'yyyy-MM-dd HH:00:00' : 'yyyy-MM-dd HH:mm:ss'"
                    :format="queryParams.statType === 'hour' ? 'yyyy-MM-dd HH:00:00' : 'yyyy-MM-dd HH:mm:ss'"
                    :picker-options="pickerOptions"
                    @change="handleTimeChange">
                  </el-date-picker>
                </el-form-item>
              </template>
              
              <!-- 日期选择 -->
              <template v-else-if="queryParams.statType === 'day'">
                <el-form-item label="时间范围" prop="timeRange">
                  <el-date-picker
                    v-model="timeRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    @change="handleTimeChange">
                  </el-date-picker>
                </el-form-item>
              </template>
              
              <!-- 月份选择 -->
              <template v-else-if="queryParams.statType === 'month'">
                <el-form-item label="时间范围" prop="timeRange">
                  <el-date-picker
                    v-model="timeRange"
                    type="monthrange"
                    range-separator="至"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份"
                    value-format="yyyy-MM"
                    @change="handleTimeChange">
                  </el-date-picker>
                </el-form-item>
              </template>
              
              <!-- 年份选择 -->
              <template v-else-if="queryParams.statType === 'year'">
                <el-form-item label="时间范围" prop="timeRange">
                  <el-date-picker
                    v-model="timeRange"
                    type="year"
                    range-separator="至"
                    placeholder="选择年份"
                    value-format="yyyy"
                    @change="handleTimeChange">
                  </el-date-picker>
                </el-form-item>
              </template>

              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 图表内容 -->
          <div class="chart-content">
            <!-- <div class="chart-header">
              <div class="chart-title">
                <span>用电量统计图</span>
                <el-radio-group v-model="chartType" size="small" @change="handleChartTypeChange">
                  <el-radio-button label="bar">柱状图</el-radio-button>
                  <el-radio-button label="line">折线图</el-radio-button>
                </el-radio-group>
              </div>
            </div> -->
            <div class="chart-body">
              <div ref="chartContainer" style="width: 100%; height: 100%;"></div>
            </div>
            <!-- 添加表格 -->
            <div class="table-container">
              <div class="table-header">
                <el-button type="primary" icon="el-icon-download" @click="handleExport">导出</el-button>
              </div>
              <el-table 
                :data="chartData ? chartData.tableDataVOList : []" 
                style="width: 100%" 
                border
                height="250">
                <el-table-column prop="name" label="区域名称" align="center" min-width="120">
                  <template>
                    {{ queryParams.name }}
                  </template>
                </el-table-column>
                <el-table-column prop="recordDate" label="日期" align="center" min-width="120">
                  <template slot-scope="scope">
                    {{ chartData.chartData.xaxisDataChart[scope.$index] }}
                  </template>
                </el-table-column>
                <el-table-column prop="pae" label="正向有功电量(kWh)" align="center" min-width="150">
                  <template slot-scope="scope">
                    {{ scope.row.pae }}
                  </template>
                </el-table-column>
                <el-table-column prop="paeRatio" label="环比变化" align="center" min-width="120">
                  <template slot-scope="scope">
                    <span :style="{ color: scope.row.paeRatio > 0 ? '#ff4d4f' : (scope.row.paeRatio < 0 ? '#52c41a' : '') }">
                      <i v-if="scope.row.paeRatio !== 0" :class="[
                        'el-icon-caret-' + (scope.row.paeRatio > 0 ? 'top' : 'bottom'),
                        scope.row.paeRatio > 0 ? 'up-icon' : 'down-icon'
                      ]"></i>
                      {{ formatRatio(scope.row.paeRatio) }}
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import AmmeterTree from "@/components/AmmeterTree";
import { getAmmeterChartData, exportAmmeterChartData } from "@/api/mes/bm/ammeterData";
import * as echarts from 'echarts';

export default {
  name: "AmmeterDataChart",
  components: {
    AmmeterTree
  },
  data() {
    return {
      selectedNode: null,
      isCollapse: false,
      isResizing: false,
      leftWidth: 350,
      startX: 0,
      startWidth: 0,
      chartType: 'bar',
      chart: null,
      chartData: null,
      // 修改查询参数的默认值
      queryParams: {
        statType: 'day',  // 默认为日
        beginTime: '',
        endTime: '',
        type: 'master',   // 默认为北化浩绅
        id: '0',          // 默认为根节点ID
        name: '北化浩绅'  // 默认值为北化浩绅
      },
      timeRange: [],
      // 时间选择器配置
      pickerOptions: {
        shortcuts: [{
          text: '最近半个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    };
  },
  created() {
    // 设置默认时间范围为近半个月
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
    this.timeRange = [start, end];
    this.queryParams.beginTime = this.formatDate(start, 'yyyy-MM-dd');
    this.queryParams.endTime = this.formatDate(end, 'yyyy-MM-dd');
    
    // 自动执行查询
    this.handleQuery();
  },
  computed: {
    leftColSpan() {
      return 'auto';
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log('节点数据:', data);
      this.selectedNode = data;
      
      // 设置查询参数
      this.queryParams.type = data.type;
      this.queryParams.id = data.id;
      this.queryParams.name = data.name || data.label; // 使用节点的name或label
      
      console.log('查询参数:', this.queryParams);
      // 触发查询
      this.handleQuery();
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
      this.$nextTick(() => {
        if (this.chart) {
          this.chart.resize();
        }
      });
    },
    startResize(e) {
      if (this.isCollapse) return;
      this.isResizing = true;
      this.startX = e.clientX;
      this.startWidth = this.leftWidth;
      
      document.addEventListener('mousemove', this.resize);
      document.addEventListener('mouseup', this.stopResize);
      
      document.body.style.userSelect = 'none';
      document.body.style.cursor = 'col-resize';
    },
    resize(e) {
      if (this.isResizing) {
        const dx = e.clientX - this.startX;
        let newWidth = this.startWidth + dx;
        newWidth = Math.max(200, Math.min(newWidth, 800));
        this.leftWidth = newWidth;
        if (this.chart) {
          this.chart.resize();
        }
      }
    },
    stopResize() {
      this.isResizing = false;
      document.removeEventListener('mousemove', this.resize);
      document.removeEventListener('mouseup', this.stopResize);
      
      document.body.style.userSelect = '';
      document.body.style.cursor = '';
    },
    // 处理类型变化
    handleTypeChange(value) {
      const now = new Date();
      let start = new Date();
      
      switch(value) {
        case 'min15':
          // 15分钟类型，默认近3天
          start.setTime(now.getTime() - 3600 * 1000 * 24 * 3);
          this.timeRange = [start, now];
          break;
        case 'hour':
          // 小时类型，默认近7天
          start.setTime(now.getTime() - 3600 * 1000 * 24 * 7);
          this.timeRange = [start, now];
          break;
        case 'day':
          // 日类型，默认近15天
          start.setTime(now.getTime() - 3600 * 1000 * 24 * 15);
          this.timeRange = [start, now];
          break;
        case 'month':
          // 月类型，默认近3个月
          start.setMonth(now.getMonth() - 3);
          this.timeRange = [start, now];
          // 设置月初和月末
          const startMonthStr = this.formatDate(start, 'yyyy-MM');
          const endMonthStr = this.formatDate(now, 'yyyy-MM');
          this.queryParams.beginTime = startMonthStr + '-01';
          const endDate = new Date(endMonthStr.slice(0,4), parseInt(endMonthStr.slice(5,7)), 0);
          this.queryParams.endTime = `${endMonthStr}-${endDate.getDate()}`;
          break;
        case 'year':
          // 年类型，默认2023年
          this.timeRange = '2023';
          // 设置年初和当前年末
          this.queryParams.beginTime = '2023-01-01';
          const currentYear = now.getFullYear();
          this.queryParams.endTime = `${currentYear}-12-31`;
          break;
      }
      
      // 根据不同类型设置时间格式
      if (value === 'min15' || value === 'hour') {
        let beginTimeStr, endTimeStr;
        
        if (value === 'hour') {
          // 小时类型，开始时间设为整点，结束时间设为59分59秒
          beginTimeStr = this.formatDate(this.timeRange[0], 'yyyy-MM-dd HH') + ':00:00';
          endTimeStr = this.formatDate(this.timeRange[1], 'yyyy-MM-dd HH') + ':59:59';
        } else {
          // 15分钟类型保持原样
          beginTimeStr = this.formatDate(this.timeRange[0], 'yyyy-MM-dd HH:mm:ss');
          endTimeStr = this.formatDate(this.timeRange[1], 'yyyy-MM-dd HH:mm:ss');
        }
        
        this.queryParams.beginTime = beginTimeStr;
        this.queryParams.endTime = endTimeStr;
      } else if (value === 'day') {
        this.queryParams.beginTime = this.formatDate(this.timeRange[0], 'yyyy-MM-dd');
        this.queryParams.endTime = this.formatDate(this.timeRange[1], 'yyyy-MM-dd');
      }
      
      // 触发查询
      this.handleQuery();
    },
    
    // 处理时间变化
    handleTimeChange(value) {
      if (value) {
        if (this.queryParams.statType === 'year') {
          // 年份选择，设置年初和当前年末
          this.queryParams.beginTime = value + '-01-01';
          const now = new Date();
          const currentYear = now.getFullYear();
          this.queryParams.endTime = `${currentYear}-12-31`;
        } else if (this.queryParams.statType === 'month') {
          // 月份选择，设置为月初和月末
          const [startMonth, endMonth] = value;
          // 设置开始时间为月初1号
          this.queryParams.beginTime = startMonth + '-01';
          // 设置结束时间为月末
          const endDate = new Date(endMonth.slice(0,4), parseInt(endMonth.slice(5,7)), 0);
          this.queryParams.endTime = `${endMonth}-${endDate.getDate()}`;
        } else if (this.queryParams.statType === 'hour') {
          // 小时选择，开始时间已经是整点，需要设置结束时间为59分59秒
          const [start, end] = value;
          this.queryParams.beginTime = start; // 已经是 HH:00:00 格式
          // 将结束时间的 00:00 改为 59:59
          this.queryParams.endTime = end.substring(0, 13) + ':59:59';
        } else {
          // 其他类型（15分钟）使用原始范围
          this.queryParams.beginTime = value[0];
          this.queryParams.endTime = value[1];
        }
        // 触发查询
        this.handleQuery();
      } else {
        this.queryParams.beginTime = '';
        this.queryParams.endTime = '';
      }
    },
    
    // 处理查询
    async handleQuery() {
      if (!this.queryParams.beginTime) {
        this.$message({
          message: '请选择时间范围',
          type: 'warning'
        });
        return;
      }
      
      const params = {
        statType: this.queryParams.statType,
        beginTime: this.queryParams.beginTime,
        endTime: this.queryParams.endTime,
        type: this.queryParams.type,
        id: this.queryParams.id,
        name: this.queryParams.name
      };
      
      try {
        const response = await getAmmeterChartData(params);
        if (response.code === 200) {
          this.chartData = response.data;
          this.$nextTick(() => {
            this.initChart();
          });
        } else if (response.code === 500) {
          this.$message.warning(response.msg);
        } else {
          this.$message.warning(response.msg || '获取数据失败');
        }
      } catch (error) {
        // this.$message.error('获取数据失败');
        console.error('请求错误:', error);
      }
    },
    // 添加日期格式化方法
    formatDate(date, fmt) {
      const o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'H+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds(),
        'q+': Math.floor((date.getMonth() + 3) / 3),
        'S': date.getMilliseconds()
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      for (let k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
        }
      }
      return fmt;
    },
    // 初始化图表
    initChart() {
      if (this.chart) {
        this.chart.dispose();
      }
      this.chart = echarts.init(this.$refs.chartContainer);
      this.updateChartOption();
      
      // 监听容器大小变化
      window.addEventListener('resize', this.handleResize);
      
      // 添加ResizeObserver监听容器大小变化
      if (window.ResizeObserver) {
        this.resizeObserver = new ResizeObserver(() => {
          if (this.chart) {
            this.chart.resize();
          }
        });
        this.resizeObserver.observe(this.$refs.chartContainer);
      }
    },
    
    // 处理容器大小变化
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    
    // 更新图表配置
    updateChartOption() {
      if (!this.chartData || !this.chart) return;
      
      const { xaxisDataChart, yaxisData, xaxisData } = this.chartData.chartData;
      const { max, min } = this.chartData.numData;
      const statType = this.queryParams.statType;
      
      // 找到最大值和最小值的索引
      const maxIndex = yaxisData.indexOf(max);
      const minIndex = yaxisData.indexOf(min);
      
      const option = {
        color: ['#5470C6'],
        title: [
          {
            text: `最小值：{min|${min}}`,
            left: '70%',
            top: 10,
            textStyle: {
              rich: {
                min: {
                  color: '#5470C6',
                  fontWeight: 'bold',
                  fontSize: 14,
                  padding: [0, 0, 0, 4]
                }
              },
              fontSize: 12
            }
          },
          {
            text: `总电量：{total|${this.chartData.numData.total}}`,
            left: '10%',
            top: 10,
            textStyle: {
              rich: {
                total: {
                  color: '#5470C6',
                  fontWeight: 'bold',
                  fontSize: 14,
                  padding: [0, 0, 0, 4]
                }
              },
              fontSize: 12
            }
          },
          {
            text: `最大值：{max|${max}}`,
            left: '40%',
            top: 10,
            textStyle: {
              rich: {
                max: {
                  color: '#5470C6',
                  fontWeight: 'bold',
                  fontSize: 14,
                  padding: [0, 0, 0, 4]
                }
              },
              fontSize: 12
            }
          }
        ],
        legend: {
          data: ['正向有功电量(kWh)'],
          left: 'center',
          top: 40,
          icon: 'rect',
          itemWidth: 15,
          itemHeight: 10,
          textStyle: {
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: this.chartType === 'bar' ? 'shadow' : 'line'
          }
        },
        toolbox: {
          right: 20,
          top: 20,
          feature: {
            mySwitch: {
              show: true,
              title: this.chartType === 'bar' ? '切换折线图' : '切换柱状图',
              icon: this.chartType === 'bar' ? 'path://M0,0 L20,0 L20,20 L0,20 L0,0 M1,10 L19,10 M10,1 L10,19' : 'path://M0,0 L20,0 L20,20 L0,20 L0,0 M5,2 L5,18 L15,18 L15,2 L5,2',
              onclick: () => {
                this.chartType = this.chartType === 'bar' ? 'line' : 'bar';
                this.handleChartTypeChange();
              }
            },
            dataZoom: {
              yAxisIndex: false,
              title: {
                zoom: '区域缩放',
                back: '区域还原'
              }
            },
            saveAsImage: {
              pixelRatio: 2
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '12%',
          containLabel: true
        },
        dataZoom: [
          {
            type: 'inside',
            minValueSpan: 5  // 最小显示5个数据
          },
          {
            type: 'slider',
            minValueSpan: 5  // 最小显示5个数据
          }
        ],
        xAxis: {
          type: 'category',
          data: xaxisDataChart,
          silent: false,
          splitLine: {
            show: false
          },
          axisLabel: {
            interval: function(index, value) {
              const dataLength = xaxisDataChart.length;
              // 根据数据量动态调整显示间隔
              if (dataLength <= 12) return true; // 少于12个数据全部显示
              if (dataLength <= 24) return index % 2 === 0; // 12-24个数据显示一半
              if (dataLength <= 48) return index % 4 === 0; // 24-48个数据显示1/4
              return index % Math.ceil(dataLength / 12) === 0; // 保证最多显示12个标签
            },
            rotate: 45,
            formatter: function(value) {
              // 根据统计类型处理显示格式
              if (statType === 'min15' || statType === 'hour') {
                const parts = value.split(' ');
                if (parts.length > 1) {
                  return parts[1]; // 只显示时间部分
                }
              }
              return value;
            },
            hideOverlap: true,
            textStyle: {
              fontSize: 11
            }
          },
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value',
          name: ' ',
          splitArea: {
            show: false
          }
        },
        series: [
          {
            name: '正向有功电量(kWh)',
            type: this.chartType,
            data: yaxisData.map((value, index) => {
              const itemStyle = {};
              if (index === maxIndex || index === minIndex) {
                itemStyle.itemStyle = {
                  color: index === maxIndex ? '#5470C6' : '#52c41a'
                };
              }
              return {
                value,
                ...itemStyle,
                label: {
                  show: false  // 移除数据点上的直接标签
                }
              };
            }),
            large: true,
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ],
              label: {
                formatter: '{c}'
              }
            }
          }
        ]
      };
      
      this.chart.setOption(option);
    },
    
    // 处理图表类型切换
    handleChartTypeChange() {
      this.updateChartOption();
    },
    // 格式化比率为百分比
    formatRatio(ratio) {
      if (ratio === 0) return '0.0%';
      return (ratio * 100).toFixed(1) + '%';
    },
    // 处理导出
    async handleExport() {
      try {
        const response = await exportAmmeterChartData(this.queryParams);
        const blob = new Blob([response], { type: 'application/vnd.ms-excel' });
        const link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = '电表统计.xlsx';
        link.click();
        window.URL.revokeObjectURL(link.href);
      } catch (error) {
        this.$message.error('导出失败');
        console.error('导出错误:', error);
      }
    }
  },
  beforeDestroy() {
    document.removeEventListener('mousemove', this.resize);
    document.removeEventListener('mouseup', this.stopResize);
    window.removeEventListener('resize', this.handleResize);
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  }
};
</script>

<style scoped>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.app-container {
  height: calc(100vh - 84px); /* 减去头部导航的高度 */
  padding: 10px;
  box-sizing: border-box;
  background: #f5f7fa;
}

.full-height {
  height: 100%;
}

.panel-wrapper {
  position: relative;
  height: 100%;
  min-width: 20px;
}

.left-panel {
  height: 100%;
  background: #fff;
  border-radius: 4px;
  padding: 2px;
  box-sizing: border-box;
  border: 1px solid #EBEEF5;
  position: relative;
  transition: width 0.3s;
  overflow: hidden;
}

.left-panel.collapsed {
  width: 0 !important;
  padding: 0;
  margin: 0;
  border: none;
}

.tree-wrapper {
  height: 100%;
  width: 100%;
  opacity: 1;
  transition: all 0.3s;
  overflow: hidden auto;
}

.tree-wrapper.hidden {
  width: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
}

.collapse-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 40px;
  background: #fff;
  border: 1px solid #EBEEF5;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  left: 0;
}

.left-panel:not(.collapsed) + .collapse-btn {
  left: calc(100% - 16px);
}

.collapse-btn:hover {
  background: #f5f7fa;
}

.collapse-btn i {
  font-size: 14px;
  color: #909399;
}

.chart-container {
  height: 100%;
  background: #fff;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 200;
  display: none;
}

.left-panel:not(.collapsed):hover .resizer {
  display: block;
}

.resizer:hover,
.resizer.resizing {
  background: rgba(0, 0, 0, 0.1);
}

.right-col {
  flex: 1;
  width: 0;
  min-width: 0;
  transition: margin-left 0.3s;
}

.el-row {
  display: flex;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  height: 100%;
}

.el-col {
  flex-shrink: 0;
  height: 100%;
}

.right-col.el-col {
  flex: 1;
  min-width: 0;
  height: 100%;
  transition: all 0.3s;
}

.search-wrapper {
  padding-bottom: 8px;
  border-bottom: 1px solid #EBEEF5;
  margin-bottom: 8px;
}

.chart-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chart-header {
  padding: 10px 0;
}

.chart-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.chart-title span {
  font-size: 16px;
  font-weight: 500;
}

.chart-body {
  flex: 1;
  min-height: 0;
  position: relative;
}

.table-container {
  margin-top: 16px;
  height: 250px;
  flex-shrink: 0;
}

.table-container .el-table {
  height: 100%;
}

.up-icon {
  color: #ff4d4f;
  margin-right: 4px;
}

.down-icon {
  color: #52c41a;
  margin-right: 4px;
}

/* 调整图表容器高度以适应表格 */
.chart-body {
  height: calc(60% - 20px);
  min-height: 280px;
}

.table-header {
  margin-bottom: 10px;
  text-align: right;
}
</style>
